<template>
  <div class="i-senior-search">
    <i-form ref="myForm" :dataForm="basicForm" class="i-senior-search-basic">
      <template #senior-search-template>
       <div style="white-space: nowrap;">
            <a-button type="primary" @click.stop.prevent="searchFun()" class="i-senior-search_btn">
          筛选
        </a-button>
        <a-button type="primary" @click.stop.prevent="seniorSearchFun()" v-if="seniorSearchOption.seniorForm" class="search-submit">
          更多
        </a-button>
         <slot name="other-search-operation" ></slot>
       </div>
      </template>
    </i-form>
    <div v-if="tagList.length>0" class="i-senior-search_content">
        <a-tag closable @close.prevent="closeTag(item,index)"  v-for="(item,index) in tagList" :key="index">
            <span>{{item.label}}:</span>
            <span>{{item.value}}</span>
        </a-tag>
    </div>
    <IDialog :dialogData="dialogData">
      <i-form ref="myForm" :dataForm="seniorForm"></i-form>
    </IDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, PropType, onMounted, ref } from 'vue'
import IDialog from '../../IDialog/src/IDialog.vue'
import IForm from '../../IForm/src/IForm.vue'
// import { DialogDataInterface } from '../../IDialog/src/IDialogInterFace'
import { DataListInterFace, FormInterFace } from '../../IForm/src/IFormInterFace'
import { SeniorSearchInterFace, TagDataInterface } from './ISeniorSearchInterface'
import { isEmpty, isArray, getCheckListByTreeNoParent } from 'wd-platform-utils'

export default defineComponent({
  name: 'wd-senior-search',
  props: {
    seniorSearchOption: {
      type: Object as PropType<SeniorSearchInterFace<any, any>>,
      required: true
    }
  },
  setup (props, ctx) {
    const basicForm = ref<FormInterFace<any>>(props.seniorSearchOption.basicForm)
    const seniorForm = ref<FormInterFace<any>|null>(props.seniorSearchOption.seniorForm || null)
    const tagList = ref<TagDataInterface[]>([])
    const dialogData = reactive<any>({
      width: props.seniorSearchOption.dialogData && props.seniorSearchOption.dialogData.width ? props.seniorSearchOption.dialogData.width : 1200, // 弹框宽度
      show: false, // 弹框是否展示
      title: props.seniorSearchOption.dialogData && props.seniorSearchOption.dialogData.title ? props.seniorSearchOption.dialogData.title : '高级筛选', // 弹框名字
      options: props.seniorSearchOption.dialogData && props.seniorSearchOption.dialogData.options ? props.seniorSearchOption.dialogData.options : {},
      onSubmit: () => {
        dialogData.onCancel && dialogData.onCancel()
        searchSaveTag()
        props.seniorSearchOption.onSubmit && props.seniorSearchOption.onSubmit()
      },
      onCancel: () => {
        dialogData.show = false
        props.seniorSearchOption.onCancel && props.seniorSearchOption.onCancel()
      }
    })
    const seniorSearchFun = () => {
      dialogData.show = true
      ctx.emit('clickSeniorFun')
    }
    const searchFun = () => {
      dialogData.onSubmit && dialogData.onSubmit()
    //   props.seniorSearchOption.dialogData.onSubmit && await props.seniorSearchOption.dialogData.onSubmit()
    //   searchSaveTag()
    }
    const searchSaveTag = () => {
      if (props.seniorSearchOption.seniorForm) {
        formatTagFun(basicForm.value)
        seniorForm.value && formatTagFun(seniorForm.value)
      }
    }
    const formatTagFun = (itemSearchForm:FormInterFace<any>) => {
      itemSearchForm.fieldDataList.forEach((item, index) => {
        const tIndex:number = tagList.value.findIndex(sitem => sitem.label === item.label)
        if (tIndex > -1) {
          tagList.value.splice(tIndex, 1)
        }
        let tagData:TagDataInterface|null = null
        if (['input', 'inputNumber', 'textarea'].indexOf(item.type) > -1 && !isEmpty(itemSearchForm.form[item.field])) {
          tagData = { label: item.label, value: itemSearchForm.form[item.field], field: item.field, type: item.type }
        } else if (['checkbox', 'radio', 'select'].indexOf(item.type) > -1 && !isEmpty(itemSearchForm.form[item.field])) {
          if (isArray(itemSearchForm.form[item.field])) {
            const dataList = ((itemSearchForm.fieldDataList[index].dataList || []) as DataListInterFace[]).filter((sitem:DataListInterFace) => itemSearchForm.form[item.field].some((iitem:string) => iitem === sitem.value))
            if (dataList && dataList.length > 0) {
              tagData = { label: item.label, value: dataList.map((item:{label:string;value:string}) => item.label).join(','), field: item.field, type: item.type }
            }
          } else {
            const data = ((itemSearchForm.fieldDataList[index].dataList || []) as DataListInterFace[]).find((sitem:DataListInterFace) => sitem.value === itemSearchForm.form[item.field])
            if (data) {
              tagData = { label: item.label, value: data.label, field: item.field, type: item.type }
            }
          }
        } else if (['datePicker'].indexOf(item.type) > -1 && !isEmpty(itemSearchForm.form[item.field])) {
          tagData = { label: item.label, value: itemSearchForm.form[item.field], field: item.field, type: item.type }
        } else if (['rangePicker'].indexOf(item.type) > -1 && itemSearchForm.form[item.field] && itemSearchForm.form[item.field].length > 0) {
          tagData = { label: item.label, value: itemSearchForm.form[item.field][0] + ' - ' + itemSearchForm.form[item.field][1], field: item.field, type: item.type }
        } else if (['treeSelect', 'checkBoxSelect', 'cascader'].indexOf(item.type) > -1 && itemSearchForm.form[item.field] && itemSearchForm.form[item.field].length > 0) {
          const values:string[] = isArray(itemSearchForm.form[item.field]) ? itemSearchForm.form[item.field] : [itemSearchForm.form[item.field]]
          const dataList = getCheckListByTreeNoParent({
            treeList: itemSearchForm.fieldDataList[index].dataList || [],
            checkList: item.type === 'treeSelect' ? values.map((titem:any) => titem.value || titem) : values,
            field: (item.options && item.options.fieldNames) ? item.options.fieldNames.value : 'value'
          }).map(sitem => {
            let value = ''
            if (item.options && item.options.fieldNames) {
              value = sitem[item.options.fieldNames.label]
            } else {
              value = sitem.label
            }
            return value
          })
          tagData = { label: item.label, value: dataList.join(item.type === 'treeSelect' ? ',' : '/'), field: item.field, type: item.type }
        }
        tagData && tagList.value.push(tagData)
      })
    }
    const closeTag = async (data:TagDataInterface, index:number) => {
      clearItem(data, basicForm.value.form)
      seniorForm.value && clearItem(data, seniorForm.value.form)
      tagList.value.splice(index, 1)
      searchFun()
    }
    const clearItem = (data:TagDataInterface, formItem:any) => {
      Object.keys(formItem).forEach(key => {
        if (key === data.field) {
          if (['input', 'inputNumber', 'textarea'].indexOf(data.type) > -1) {
            formItem[key] = ''
          } else if (['checkbox', 'radio', 'select'].indexOf(data.type) > -1) {
            formItem[key] = isArray(formItem[data.field]) ? [] : null
          } else if (['datePicker'].indexOf(data.type) > -1) {
            formItem[key] = null
          } else if (['rangePicker'].indexOf(data.type) > -1) {
            formItem[key] = []
          } else if (['treeSelect', 'checkBoxSelect', 'cascader'].indexOf(data.type) > -1) {
            formItem[key] = []
          }
        }
      })
    }
    onMounted(() => {
      basicForm.value = props.seniorSearchOption.basicForm
      if (basicForm.value.fieldDataList.length > 0) {
        if (!(basicForm.value.fieldDataList[basicForm.value.fieldDataList.length - 1].template === 'senior-search-template')) {
          basicForm.value.fieldDataList.push({
            width: 4,
            type: 'template', // form表单类型
            label: '', // 字段描述信息
            field: '', // form 对应字段
            template: 'senior-search-template'
          })
        }
      }

      if (props.seniorSearchOption.seniorForm) {
        seniorForm.value = props.seniorSearchOption.seniorForm
      }
    })
    return {
      formatTagFun,
      searchSaveTag,
      closeTag,
      tagList,
      searchFun,
      basicForm,
      seniorForm,
      seniorSearchFun,
      dialogData
    }
  },
  methods: {},
  components: {
    IForm,
    IDialog
  }
})
</script>

function getCheckListByTreeNoParent(arg0: { treeList: DataListInterFace[]|import("../../IForm/src/IFormInterFace").CascaderInterFace[]; checkList: any[]; field: any }) {
  throw new Error('Function not implemented.')
}
